<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tauri App</title>
</head>
<body>

    
	<div style="display:flex;justify-content:center;align-items:center;flex-direction:column">
	<video class="video" playsinline ></video>
	<button style="width:200px;padding:10px" onclick="takePhoto()">takePhoto</button>
	<canvas width="200" height="200" id="canvas1"></canvas>
	</div>
	



   
   <script>


	const maxVideoSize = 200;
	var video = document.querySelector('video');
	
	
    async function setupCamera() {
      video.width = maxVideoSize
      video.height = maxVideoSize

      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: false,
          video: {
            facingMode: 'user',
            width: maxVideoSize,
            height: maxVideoSize,
          },
        })
        video.srcObject = stream

        return new Promise(resolve => {
          video.onloadedmetadata = () => {
            resolve(video)
          }
        })
      }
      const errorMessage =
        'This browser does not support video capture, or this device does not have a camera'
      alert(errorMessage);
      return Promise.reject(errorMessage)
    }

    async function load() {
      const videoLoaded = await setupCamera()
      videoLoaded.play()
      return videoLoaded
    }

    load();
		
		
	function takePhoto() {
     const ctx = document.getElementById('canvas1').getContext('2d');
     ctx.drawImage(video, 0, 0, maxVideoSize, maxVideoSize)
    }	
		
		
    </script>
</body>
</html>
